<template>

  <nav-bar-cmp leftArrow="true" :navbarTitle="movie.nm" />
  <DownAppCmp ad="" />

  <MovieInfoCmp :movie="movie" />

  <DateTabFiltersCmp :showDates="showDates" />

</template>

<script setup>





import DateTabFiltersCmp from '@/components/buy_ticket/DateTabFiltersCmp.vue';
import MovieInfoCmp from '@/components/buy_ticket/MovieInfoCmp.vue';
import NavBarCmp from '@/components/common/NavBarCmp.vue';

import { fetchMovieIntro, fetchMovieShowDays } from '@/api/index.js';
import { onMounted, ref, computed, watch } from 'vue';
import { useStore } from "@/stores/index.js"
const store = useStore();



import { useRoute } from 'vue-router';
const route = useRoute();

const movie = ref({})

import { useHead } from '@unhead/vue'







const CinemaResults = ref([]);
const showDates = ref([]);

// const cinemaIds = ref([]);
const pageNum = ref(1);
const limit = ref(20);
const offset = computed(() => {
  return (pageNum.value - 1) * limit.value;
});

const cinemaList = ref([])
const activeTabIndex = ref(0);

onMounted(async () => {
  //加载电影简单信息
  const response = await fetchMovieIntro(route.params.movieId, store.currentCity.id);
  // console.log("fetchMovieIntro", response);
  movie.value = response?.movie || {}

  useHead({
    title: movie.value.nm + '-购票-猫眼电影'
  })


  //加载电影上映日期
  const res = await fetchMovieShowDays(route.params.movieId, store.currentCity.id)
  showDates.value = res.data.dates?.map((item) => {
    return item.date
  })
  console.log("showDates", showDates.value);



})






const handleClickTab = (data) => {
  // 切换了tab
  activeTabIndex.value = data;
  console.log("activeTabIndex", activeTabIndex.value);

};


watch(activeTabIndex, (newVal) => {
  console.log("activeTabIndex newVal", newVal);
  cinemaList.value = filterCinemasByShowDate(CinemaResults.value, showDates.value[newVal]);
});

</script>
